<template>
  <van-nav-bar title="购物车" :fixed="true"/>
  <div v-if="cartData.length === 0" class="cartEmpty">
    <van-empty description="购物车空空如也">
      <van-button
      round
      type="primary"
      class="bottom-button"
      @click.stop="router.push('/')"
      >去逛逛</van-button>
    </van-empty>
  </div>
  <!-- 购物车列表 -->
  <div class="goodsList mt46">
    <van-card
    v-for="item in cartData"
    >
      <template #title>
        <div class="title">
          <p>{{item.goods.title}}</p>
          <p>x{{item.goods.stock}}</p>
        </div>
      </template>
      <template #thumb>
        <van-checkbox v-model="item.is_checked" @click.stop="store.handleCheck(item.id)">
          <img :src="item.goods.cover_url">
        </van-checkbox>
      </template>
      <template #bottom>
        <span><small>&yen;</small>{{item.goods.price}}</span>
        <van-stepper :max="item.goods.stock" v-model="item.num" @change="store.handleChangeNum(item.id,item.num)" />
      </template>
    </van-card>
  </div>
  <!-- 底部结算 -->
  <van-submit-bar :price="store.countPrice" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="store.isAllCheck" @click="store.handleAllCheck()">全选</van-checkbox>
  </van-submit-bar>
</template>
    
<script setup lang='ts'>
import { onMounted } from 'vue';

import { useCartStore } from '@/store/cartStore'
import { storeToRefs } from 'pinia';
import {useRouter} from 'vue-router';
import { Toast } from 'vant';

  // 使用 pinia
  let store = useCartStore()
  let { cartData } = storeToRefs(store)

  const router = useRouter()
  const onSubmit = () => {
    if(store.countPrice === 0){
      Toast.fail("请选择需要购买的商品")
    }else{
      router.push('/orderPreview')
    }
  }

  onMounted(() => {
    store.getCartList()
  })
</script>
    
<style scoped lang="less">
.cartEmpty {
  margin-top: 100px;
  .bottom-button {
    width: 160px;
    height: 40px;
  }
}
.goodsList {
  margin-bottom: 100px;
  img {
    width: 100px;
    height: 100px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #2c3e50;
    margin-left: -10px !important;
  }
  /deep/ .van-card {
    background-color: #fff;
    .van-card__thumb {
      width: 125px;
    }
    .van-card__content {
      padding: 10px;
      box-sizing: border-box;
      .van-card__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          font-size: 16px;
          color: red;
          line-height: 28px;
        }
      }
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>